<template>
  <div class='home'>
    <!-- 顶部地址和搜索栏 -->
    <div class="top">
        <i class="iconfont">&#xe614;</i>
        <a>{{$store.state.locationModule.location}}></a>
      <van-search
        shape="round"
        background="#FFCC33"
        placeholder="请输入搜索关键词"
        class="search"
        @focus="$router.push('/search')"
      />
    </div>

    <!-- 导航栏 -->
    <van-grid :column-num="4" class="nav" icon-size="40px">
      <van-grid-item v-for="nav in navList" :key="nav.cateId" :icon="nav.icon" :text="nav.name" />
    </van-grid>

    <!-- 附近商家 -->
    <p class="nearbyshop">附近商家</p>
    <van-dropdown-menu active-color="#FFCC33">
      <van-dropdown-item v-model="value" :options="option1" @change="sortShop(value)" />
      <van-dropdown-item v-model="value" :options="option2" @open="sortSale"/>
      <van-dropdown-item v-model="value" :options="option3" @open="sortDistance"/>
      <van-dropdown-item v-model="value" :options="option4" @change='otherOption(value)' />
    </van-dropdown-menu>

    <!-- 商品列表 -->
    <van-list v-model="loading" :finished="finished" finished-text="我是有底线滴">
          <van-card v-for="(shop,value) in $store.state.homeShopModule.shopList" :key="value"
            :title="shop.shopName"
            :thumb="shop.picUrl"
            @click="detailChange(value)"
          >
          <template #desc>
            <div class="descItem"><span><i class="iconfont">&#xe870;</i><b>{{(shop.wmPoiScore)/10}}</b></span>{{shop.monthSalesTip}} <span class="distance">{{shop.deliveryTimeTip}} {{shop.distance}}</span> </div>
            <div class="descItem2"><span>{{shop.minPriceTip}}</span> <span v-if="shop.origin_shipping_fee_tip">配送 {{shop.origin_shipping_fee_tip}}</span>&nbsp;&nbsp;<span>{{ shop.averagePriceTip }}</span> </div>
          </template>
            <template #tags>
              <van-tag plain type="danger" v-if="shop.statusDesc">{{ shop.statusDesc }}</van-tag>
              <van-tag plain type="primary" style="margin:0 5px">{{shop.shipping_time}}</van-tag>
              <van-tag plain type="danger">{{shop.poi_tags[0].sub_tags[0].text}}</van-tag>
            </template>
          </van-card>
    </van-list>
  </div>
</template>

<script>
import axios from 'axios'
import { mapActions } from 'vuex'
export default {
  name: 'home',
  data () {
    return {
      navList: [],
      loading: false,
      finished: true, // 加载是否结束
      value: 0,
      option1: [
        { text: '综合排序', value: 0 },
        { text: '速度最快', value: 1 },
        { text: '评分最高', value: 2 },
        { text: '起送价最低', value: 3 },
        { text: '配送费最低', value: 4 },
        { text: '人均高到低', value: 5 },
        { text: '人均低到高', value: 6 },

      ],
      option2: [{ text: '销量最高', value: 0 }],
      option3: [{ text: '距离最近', value: 0 }],
      option4: [
        { text: '筛选', value: 0 },
        { text: '链接', value: 1 },
        { text: '搜索', value: 2 },
      ],
    }
  },
  created () {
    console.log(555, '进来了')
    this.$toast({ message: '加载中...', duration: 500 })
    /* 请求导航信息 */
    axios({
      url: '/mt/openh5/homepage/kingkong',
      method: 'POST',
    }).then(response => {
      this.navList = response.data.data.kingkongList
    })
    /* 请求地理位置信息 */
    this.$store.dispatch('locate')
    /*
        附近商家数据
    */
    this.$store.dispatch('getShop')
  },
  methods: {
    // 传递商品数据id 用来跳转商品详情页
    // toDetail (id) {
    //   this.$router.push('/details/sub/' + id)
    // },
    // 商品排序选项
    sortShop (value) {
      this.$store.commit('handleSortShop', value)
    },
    // 销量排序
    sortSale () {
      this.$store.commit('handleSortSale')
    },
    // 距离最近
    sortDistance () {
      this.$store.commit('handleSortDistance')
    },
    otherOption (value) {
      if (value === 1) {
        this.$toast('功能暂时维护')
      } else {
        this.$router.push('/search')
      }
    },
    ...mapActions(['getlist']),

    detailChange (id) {
      this.getlist(id)
      this.$router.push('/details')
    },
  },
  activated () {
    console.log(55, 'keep')
  },
  beforeDestroy () {
    console.log('xiaohui')
  },

}
</script>

<style lang='less' scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2963645 */
  src: url('//at.alicdn.com/t/font_2963645_fgrjn5j4hi6.woff2?t=1637831057288') format('woff2'),
       url('//at.alicdn.com/t/font_2963645_fgrjn5j4hi6.woff?t=1637831057288') format('woff'),
       url('//at.alicdn.com/t/font_2963645_fgrjn5j4hi6.ttf?t=1637831057288') format('truetype');
}
.home{
  width: 100%;
  .top{
    height: 97px;
    background: #FFCC33;
    i{
      margin-left:37px;
      font-weight: bold;
    }
    a{
      margin-left: 15px;
      font-size: 15px;
      font-weight: bolder;
    }
  }
  .nav{
      margin-top: 100px;
    }
  .nearbyshop{
    height: 49px;
    font-size: 19px;
    padding: 0 0 0 19px;
    color: #222426;
    font-family: '宋体';
    font-weight: bold;
  }
  .options{
    margin-top: 45px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li{
      font-size: 13px;
    }
  }
  .descItem{
    margin: 10px 0 10px 0;
    color: #858687;
    span:nth-of-type(1){
      color: #FF8000;
      b{
         font-weight: bold;
         font-size: 15px;
         margin-left: 8px;
         margin-right: 10px;
      }
    }
    .distance{
      float: right;
    }
  }
  .descItem2{
    margin: 10px 0 10px 0;
    color: #858687;
  }
}
</style>
